<template>
  <div class="props">
    <a-form-model>
      <a-form-model-item label="经纬度" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
        <a-input v-model="position" />
      </a-form-model-item>
      <a-form-model-item label="">
        <a-row :gutter="10">
          <a-col :span="9" style="text-align: center">
            <a-button type="primary" @click="startPickPosition">获取位置</a-button>
          </a-col>
          <a-col :span="9" style="text-align: center">
            <a-button type="primary" @click="endPickPosition">结束获取</a-button>
          </a-col>
          <a-col :span="6" style="text-align: center">
            <a-button type="primary" style="width: 60px" @click="preview">预览</a-button>
          </a-col>
        </a-row>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>
<script>
export default {
  props: {
    location: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      position: '', //定位集合
      clickStatus: '',
    }
  },
  methods: {
    LEFT_CLICK(movement) {
      // 地图点击事件
      if (this.clickStatus === 'start') {
        this.addPoint(movement)
      } else {
        this.$message.error('请点击获取位置功能按钮')
      }
    },
    startPickPosition() {
      // 设置绘制点位的开始flag
      this.clickStatus = 'start'
    },
    endPickPosition() {
      this.clickStatus = 'end'
      const _location = this.position.split(',')
      this.$emit('getPoint', {
        location: {
          lng: _location[0],
          lat: _location[1],
        },
      })
    },
    addPoint(movement) {
      // 获取并绘制点位
      const { Cesium, viewer } = window.cesiumInstance
      const ellipsoid = viewer.scene.globe.ellipsoid
      let cartesian = viewer.camera.pickEllipsoid(movement.position, ellipsoid)
      if (cartesian) {
        //将笛卡尔坐标转换为地理坐标
        let cartographic = ellipsoid.cartesianToCartographic(cartesian)
        //将弧度转为度的十进制度表示
        let longitudeString = Cesium.Math.toDegrees(cartographic.longitude)
        let latitudeString = Cesium.Math.toDegrees(cartographic.latitude)

        viewer.entities.removeAll()

        viewer.entities.add({
          position: Cesium.Cartesian3.fromDegrees(longitudeString, latitudeString,0),
          point: {
            color: Cesium.Color.RED,
            pixelSize: 8,
          },
        })
        this.position = `${longitudeString},${latitudeString}`
      }
    },
    preview() {
      if (!this.position) {
        return this.$message.error('请设置定位点')
      }
      // 预览
      const _location = this.position.split(',')
      const { Cesium, viewer } = window.cesiumInstance
      viewer.entities.removeAll()
      const entity = viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(_location[0], _location[1],0),
        point: {
          color: Cesium.Color.RED,
          pixelSize: 8,
        },
      })
      viewer.flyTo(entity)
      this.endPickPosition()
    },
    checkLocation(location) {
      if (JSON.stringify(location) != '{}') {
        const { Cesium, viewer } = window.cesiumInstance
        this.position = `${location.lng},${location.lat}`
        viewer.entities.add({
          position: Cesium.Cartesian3.fromDegrees(location.lng, location.lat,0),
          point: {
            color: Cesium.Color.RED,
            pixelSize: 8,
          },
        })
      }
    },
  },
  mounted() {
    console.log(this.location, 'location')
    this.checkLocation(this.location)
  },
}
</script>
<style lang="less" scoped>
.props /deep/.ant-form-item-label label,
.props /deep/.ant-radio-wrapper,
.props /deep/.ant-radio-disabled + span {
  color: white !important;
}
.props /deep/ .ant-form-item {
  margin-bottom: 10px;
}
</style>